<template>
	<view class="index-page">
		<view class="banner">
			<u--image :src="bannerImage" mode="widthFix" width="100vw" height="30vh"></u--image>
		</view>
		<view class="content">
			<view class="padding-left-lg text-lg text-bold relative">事件管理</view>
			<view class="routes">
				<view class="route-item" v-for="(item,index) of routes" :key="index" @tap="jump(item)">
					<view class="item-icon">
						<image :src="PathIcon[item.icon+`${(index===(routes.length-1) && (index+1)%2!==0)?'2':''}`]"></image>
					</view>
					<view class="item-name">{{item.name}}</view>
				</view>
			</view>
			<view class=" flex justify-between align-center">
				<view class="event-new">最新事件</view>
				<view class="text-gray" @tap="more">更多</view>
			</view>
			<view class="margin-top">
				<view v-if="list&&list.length>0">
					<view class="list-item flex align-center" v-for="(item, index) of list" :key="index" @tap="details(item)">
						<view class="event-icon flex justify-center align-center">
							<u--image :src="eventIconImage" :width="50" :height="50"></u--image>
						</view>
						<view class="padding-left-xs">
							<view class="margin-left-sm">{{item.eventName}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <AMap></AMap> -->
	</view>
</template>

<script>
	// TODO: 工作人员首页路由更新为:1.事件上报,2.待处理,3.历史待办,4.已办结,5.事件跟踪,6.事件评价
	import bannerImage from "../../static/login/banner.png"
	import {
		PathIcon
	} from "@/utils/path.config"
	import {
		mapState
	} from "vuex"
	import {
		getEventList as requestApi
	} from '@/api/Interface/event'
	import eventIconImage from "@/static/index/icon.png"
	// import AMap from "@/components/AMap/AMap.vue"
	/**
	 * 首页
	 */
	export default {
		components: {
			// AMap
		},
		data() {
			return {
				bannerImage,
				PathIcon,
				searchObj: {
					pageNum: 1,
					pageSize: 10
				},
				list: [],
				eventIconImage
			};
		},
		computed: {
			...mapState("user", {
				routes: state => state.routes
			}),
		},
		onShow() {
			this.getDatas()
		},
		onPullDownRefresh() {
			this.getDatas()
		},
		methods: {
			getDatas() {
				this.list = [];
				requestApi(this.params).then(res => {
					if (res.code === 200) {
						this.list = res.rows;
					} else this.$toast(res.msg)
				})
			},
			more() {
				this.$jump("/pages/event/event/list")
			},
			details(e) {
				this.$jump({
					to: "/pages/event/event/detail",
					query: {
						id: e.eventId
					}
				})
			},
			jump(e) {
				const {
					key,
					name,
					path
				} = e;
				this.$jump(path)
			},
		},
	};
</script>

<style lang="less" scoped>
	@paddingTop: 5vh;

	.index-page {
		padding-top: @paddingTop;
		min-height: 100vh;
		background-color: #f6f6f6;

		.banner {
			position: absolute;
			top: 0;
		}

		.content {
			position: relative;
			padding: 0 30rpx 200rpx 30rpx;

			.routes {
				margin-top: 60rpx;
				display: flex;
				flex-wrap: wrap;
				width: 100%;

				.route-item {
					width: 48%;
					// height: 150rpx;
					// flex: 1;
					border-radius: 20rpx;
					// padding: 30rpx;
					color: #ffffff;
					font-size: 36rpx;
					font-weight: bold;
					position: relative;
					margin-bottom: 30rpx;

					.item-icon {
						position: relative;
						width: 100%;
						height: 200rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.item-name {
						position: absolute;
						top: 0;
						bottom: 0;
						margin: auto 0;
						padding-left: 8%;
						height: max-content;
					}
				}

				// .route-item:nth-child(2n-1):
				// .route-item:last-child {
				// 	width: 100%;
				// }
				.route-item:nth-child(2n-1):last-child {
					width: 100%;
				}

				.route-item:nth-child(2n-1):not(:last-child) {
					margin-right: 4%;
				}
			}

			.event-new {
				font-size: 32rpx;
				font-weight: bold;
				padding: 30rpx;

			}

			.list-item {
				background-color: #ffffff;
				border-bottom: 1px solid #f8f8f8;
				padding: 30rpx;
				margin-bottom: 30rpx;
				border-radius: 20rpx;

				.event-icon {
					background-color: #E3EDFF;
					border-radius: 100%;
					width: 100rpx;
					height: 100rpx;
				}
			}

			.list-item:not(:last-child) {
				border-bottom: 1px solid #f8f8f8;
			}
		}
	}

	.report {
		background-image: url("@/static/index/report.png");
	}

	.follow {
		background-image: url("@/static/index/follow.png");
	}

	.rate {
		background-image: url("@/static/index/rate.png");
	}
</style>